<%@page import="com.shadowtorcher.stdisk.bean.LogicFileBean" %>
<%@page import="com.shadowtorcher.stdisk.bean.PhysicsFileBean" %>
<%@page import="com.shadowtorcher.stdisk.bean.UserBean" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	LogicFileBean logicfilebean=(LogicFileBean)request.getAttribute("logicfilebean");
	PhysicsFileBean physicsfilebean=(PhysicsFileBean)request.getAttribute("physicsfilebean");
	UserBean userbean=(UserBean)request.getAttribute("userbean");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/lib/mdui.min.js"></script>
	<script src="../js/lib/jquery-3.2.1.slim.min.js"></script>
	<script src="../js/lib/holder.min.js"></script>
	<script src="../js/lib/highlight.pack.js"></script>
	<script src="../js/lib/mustache.js"></script>
	<script src="../js/docs.js"></script>
	<script src="../js/init.js"></script>
	<script src="../js/jquery.js"></script>
	<script src="../js/listfile.js"></script>
	<script>
		var datasize=bytesToSize(<%=physicsfilebean.getFileSize()%>);
		//downloadfile(uuid)
	</script>
	<link rel="stylesheet" href="../css/mdui.min.css">
	<link rel="stylesheet" href="../css/github-gist.css">
	<link rel="stylesheet" href="../css/railscasts.css">
	<link rel="stylesheet" href="../css/docs.css">
	<link rel="stylesheet" href="../css/mdui.min.css"/>
	<title>欢迎使用STdisk - 集中管理您的所有文件</title>
	<script>
        function render_chip(data, index) {
            let array = ["boy", "boy-1", "girl-2"];
            $.ajax({
                url: "../template/file_share_chip.html",
                type: "GET",
                dataType: 'html',
                async: false,
                success: function (template) {
                    data.sex = array[Math.round(Math.random() * 2)];
                    data.index = index;
                    $("#file-share-chips").append(Mustache.render(template, data));
                }
            });
        }
        function get_commit() {
            $.get("../api/getcomment",
                {
                    "sharedFileID": "<%=logicfilebean.getLogicFileID()%>"
                },
                function (data) {
                    switch (data.code) {
                        case 0:
                            let comments = data.Comment;
                            for (let i = 0; i < comments.length; i++)
                                render_chip(comments[i], i);
                            break;
                        case -1:
                            mdui.snackbar({
                                message: '出错 ' + data.message
                            });
                    }
                }, "json");
        }
        
        function post() {
            let uuid = "<%=logicfilebean.getLogicFileID()%>";
            let comment = $("#comment").val();
            $.ajax({
                url: "../api/getcomment",
                type: "POST",
                dataType: 'json',
                data: {
                    "sharedFileID": uuid,
                    "comment": comment
                },
                success: function (data) {
                    switch (data.code) {
                        case 0:
                            let D = {};
                            D.Comment = comment;
                            render_chip(D, -1);
                            $("#comment").val("");
                            break;
                        case -1:
                            mdui.snackbar({
                                message: '出错 ' + data.message
                            });
                            break;
                    }
                }
            });
        }
        $(document).ready(function () {
            get_commit();
            var inst = new mdui.Collapse('#collapse');
            document.getElementById('toggle-1').addEventListener('click', function () {
                inst.toggle('#item-1');
            });
            var $$ = mdui.JQ;
            $$('#open').on('click', function () {
                mdui.snackbar({
                    message: '评论成功！'
                });
            });
            initfab(data);
        });
	</script>
</head>
<body class=" mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded mdui-theme-primary-blue ">
  	<div class="mdui-appbar mdui-appbar-fixed">
			<div class="mdui-toolbar mdui-color-theme">
				<a href="javascript:" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#main-drawer'}"><i
						class="mdui-icon material-icons">menu</i></a>
                <a href="../index.html" class="mdui-typo-headline">STdisk</a>

				<div class="mdui-toolbar-spacer"></div>
				<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
				<!--<a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '搜索文件'}"><i class="mdui-icon material-icons">search</i></a>
				-->
				<a href="javascript:" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '刷新文件列表'}"><i
						class="mdui-icon material-icons">refresh</i></a>

				<a href="javascript:" class="mdui-btn mdui-btn-icon"><i
						class="mdui-icon material-icons">more_vert</i></a>
			</div>
		</div>


  <div class="mdui-container">
  <div class="mdui-row">
  <div class="mdui-col-xs-6 mdui-col-offset-md-2 ">
  <!------------------------------------------------------------->
  <div class="mdui-card mdui-m-t-5">

  <!-- 卡片头部，包含头像、标题、副标题 -->
  <div class="mdui-card-header">
    <img class="mdui-card-header-avatar" src="../img/boy.png"/>
    <div class="mdui-card-header-title"><%=userbean.getUserName() %></div>
    <div class="mdui-card-header-subtitle">普通用户</div>
  </div>

  <!-- 卡片的媒体内容，可以包含图片、视频等媒体内容，以及标题、副标题 -->
  <div class="mdui-card-media">
    <img src="../img/card.jpg" />

    <!-- 卡片中可以包含一个或多个菜单按钮 -->
    <div class="mdui-card-menu">
      
    </div>
  </div>

  <!-- 卡片的标题和副标题 -->
  <div class="mdui-card-primary">
    <div class="mdui-card-primary-title"><div id="filename"><%=logicfilebean.getLogicFileName() %>
    	<div class="mdui-float-right" id="toggle-1">
    	<button class="mdui-btn mdui-btn-icon mdui-ripple" ><i class="mdui-collapse-item-arrow mdui-icon material-icons">message</i></button>
    	</div>
    </div>
    	
    </div>
    <div class="mdui-card-primary-subtitle">
    	<div class="mdui-float-left"><p id="size">大小：<script>document.getElementById("size").innerHTML=datasize;</script></p><p>创建时间：<%=logicfilebean.getCreationDate() %>&nbsp;&nbsp;&nbsp;&nbsp;</p></div>

    </div>
  </div>

      <!-- 卡片的内容 -->


      <div class="mdui-card-content">

          <div class="mdui-row">
              <div class="mdui-col-xs-12 mdui-m-b-3">
                  <div class="mdui-collapse" id="collapse">
                      <div class="mdui-collapse-item" id="item-1">
                          <div class="mdui-collapse-item-header">

                          </div>
                          <div class="mdui-collapse-item-body" id="file-share-chips">

                              <div class="mdui-button mdui-float-right">
                                  <button class="mdui-btn mdui-btn-icon mdui-color-theme mdui-ripple "
                                          mdui-dialog="{target: '#commentadd'}"><i class="mdui-icon material-icons">border_color</i>
                                  </button>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>


          <!-- 卡片的按钮 -->
  <div class="mdui-card-actions">
  <div class="mdui-row">
    <div onclick="downloadfile('<%=logicfilebean.getLogicFileID()%>')"><button class="mdui-btn mdui-ripple mdui-center" id="download" ><i class="mdui-icon material-icons">file_download</i>下载</button></div>
    
  	<!-- <button class="mdui-btn mdui-btn-icon mdui-float-right"><i class="mdui-icon material-icons">expand_more</i></button> -->
  </div>

  </div>

      </div>


      <div class="mdui-dialog" id="commentadd">
          <div class="mdui-dialog-title">我的评论：</div>
  		<div class="mdui-dialog-content">
  			<!-- 浮动标签、多行文本框 -->
				<div class="mdui-textfield mdui-textfield-floating-label">
 					 <i class="mdui-icon material-icons">textsms</i>
 					 <label class="mdui-textfield-label">Message</label>
 					 <textarea class="mdui-textfield-input" id="comment"></textarea>
				</div>
  		</div>
  		<div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" id="open" mdui-dialog-close onclick="post()">提交</button>
    		<button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
        </div>
	</div>

  </div>
  </div>
  </div>
  </div>
</body>
</html>